<template>
	<view>
		<picker mode="multiSelector" @change="change" @columnchange="columnchange" :range="items" :value="value">
			<view class="gui-flex gui-space-between gui-align-items-center">
				<text :style="{'color':!val?'gray':'',textAlign:align}" class="gui-form-input gui-flex1 gui-ellipsis"
					style="overflow: hidden;">{{val||placeholder}}</text>
				<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "hyb-picker",

		props: {
			modelValue: {
				type: String,
				default: ""
			},



			showPath: {
				type: Boolean,
				default: false
			},


			align: {
				type: String,
				default: "left"
			},

			placeholder: {
				type: String,
				default: "请选择"
			},
			range: {
				type: Array,
				default: () => {
					return []
				}
			},
		},


		watch: {

			modelValue: {
				immediate: true,
				handler: function(val) {
					if (val) {
						this.val = val;
					}
				}
			}
		},

		data() {
			return {
				val: "",
				value: [0],
				items: [],
			};
		},


		created() {
			this.items[0] = this.range[0]
			this.setItems(0, 0)
		},
		methods: {
			change(e) {
				this.value = e.detail.value;


				let vals = [];
				e.detail.value.forEach((k, k0) => {
					if (this.items[k0][k]) {
						vals.push(this.items[k0][k])
					}
				})
				let val = vals.join("-")
				val = val.replace("-不限", '');

				if (this.showPath) {
					this.val = val;
				} else {
					this.val = this.items[this.value.length - 1][this.value[this.value.length - 1]];
				}
				setTimeout(() => {
					this.$emit('input', val)
					this.$emit('update:modelValue', val)
					this.$emit('change', val)
				}, 200)
			},
			columnchange(e) {
				this.setItems(e.detail.column, e.detail.value)
			},

			setItems(col, val) {
				for (let i = col + 1; i < this.range.length; i++) {
					this.items[i] = this.range[i][val];
				}
			}
		}
	}
</script>

<style>

</style>
